<template>
	<view class="status-bar-height" :style="[styles]"></view>
</template>

<script>
/**
 * 导航栏高度占位
 * 注意，如果小程序未设置navigationStyle 为 custom，请不要使用此组件占位
 * @author liruilin
 * @property {Boolean} mpMenuButtonBoundingHeight = [true|false]    是否设置小程序胶囊高度
 */
export default {
	props: {
		mpMenuButtonBoundingHeight: {
			type: Boolean,
			default: false
		}
	},
	
	created(){
		// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-QQ || MP-TOUTIAO
	    let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		this.menuButtonBoundingHeight = menuButtonInfo.height
		menuButtonInfo = undefined
		// #endif
	},
	data(){
		return {
			menuButtonBoundingHeight: 0
		}
	},
	computed: {
		styles() {
			let height = 0
			// #ifndef H5
			height += this.$systemInfo.statusBarHeight
			// #endif
			// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-QQ || MP-TOUTIAO
			if(this.mpMenuButtonBoundingHeight){
				height += this.menuButtonBoundingHeight
			}
			// #endif
			return {
				height: height + 'px'
			}
		}
	}
}
</script>

<style lang="scss" scoped>

</style>
